<template>
<div class="top">
    <div>
        <span>名称:</span><input type="text" placeholder="请输入名称" v-model="name" @keydown.enter="up">
    </div>
    <div>
        <span>属性:</span><input type="text" placeholder="请输入属性" v-model="attribute" @keydown.enter="up">
    </div>
    <div>
        <span>等级:</span><input type="text" placeholder="请输入等级" v-model.number="grade" @keydown.enter="up">
    </div>
    <div>
        <span>战力:</span><input type="text" placeholder="请输入战力" v-model.number="fight" @keydown.enter="up">
    </div>
</div>
</template>

<script setup>
    import { ref } from 'vue'
    let emit=defineEmits();
    let name=ref("")
    let attribute=ref("")
    let grade=ref("")
    let fight=ref("")
    let isvaild=ref(false)
    let up=()=>{
        if(name.value==="")
        {
            alert("名字不能为空")
        }
        else if(attribute.value===""){
            alert("属性不能为空")
        }
        else if(grade.value===""){
            alert("等级不能为空")
        }
        else if(fight.value==="")
        {
            alert("战力不能为空")
        }
        else{
            emit("CCC",name.value,grade.value,attribute.value,isvaild.value,fight.value)
            name.value=""
            grade.value=""
            attribute.value=""
            fight.value=""
        }
    }
</script>

<style scoped>
    .top{
        margin-top: 15px;
        text-align: center;
        margin-bottom: 10px;
    }
    input{
        margin: 5px;
    }
</style>